use yew::{function_component, html, use_effect, Callback, Html};
use yew_hooks::{use_local_storage};
use yewdux::{use_dispatch};
use crate::business::component::modal::{show_modal, Modal, ModalProp};
use crate::business::page::fragment::im_session_list_view::{SessionAction, SessionListState};
use crate::business::util::util::get_login_info;
use crate::db::service::im_session_service::ImSessionService;

#[function_component(IndexPage)]
pub fn index_page()->Html {

    let session_dispatch = use_dispatch::<SessionListState>();

    let local_storage = use_local_storage::<String>("_login_".to_string());
    let user_id = match get_login_info(local_storage) {
        None => {None}
        Some(token) => {
            Some(token.use_id)
        }
    };

    let user_id_clone = user_id.clone().unwrap();
    let session_dispatch_clone = session_dispatch.clone();
    use_effect(move || {
        let hot_message_total = ImSessionService::hot_message_total(user_id_clone.clone(), 1000);
        session_dispatch_clone.apply(SessionAction::SetHotMessageTotal(hot_message_total));
        
        ||()
    });

    let model_prop = ModalProp {id: "exampleModal".to_string(), class: None, title: "demo".to_string(),  children: Default::default() };
    let show_modal_click = Callback::from(move |_| show_modal("exampleModal"));

    html! {
        <div>
            <h1> {" demo "} </h1>
            <button onclick={ show_modal_click }>
                { "show modal" }
            </button>
            <Modal ..model_prop.clone()>
                <div style="height: 200px">
                    <h1> { "demo" } </h1>
                </div>
            </Modal>
        </div>
    }
}